<!--
 * @Description: 
 * @LastEditors: xzh
 * @LastEditTime: 2024-06-11 22:17:43
-->
<template>
  <BorderBox11
    :color="['rgb(79, 210, 221)', '']"
    :title="$t(`page.dataV.title`)"
  >
    <div class="afterSale-container">
      <!-- 头部信息 -->
      <div class="afterSale-head">
        <AfterSaleHead />
      </div>
      <!-- 主体信息 -->
      <div class="afterSale-content">
        <AfterSaleContent />
      </div>
    </div>
  </BorderBox11>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
import { BorderBox11 } from "@dataview/datav-vue3";
import { useDark, useToggle } from "@vueuse/core";
import AfterSaleHead from "./afterSale-head/index.vue";
import AfterSaleContent from "./afterSale-content/index.vue";
import Dile_StoreAction from "@/utils/cache/store";
import { themeEnum } from "@/utils/constants/app/index.d";
// 当前是否为暗黑模式
let isDark = useDark();

/**
 * @Author: xzh
 * @Description: 初始化
 * @Param:
 */
onMounted(() => {
  !isDark.value && initDark();
});

/**
 * @Author: xzh
 * @Description: 加载暗黑环境
 * @Param:
 */
let initDark = () => {
  //切换暗黑模式
  let toggleDark = useToggle(isDark);
  toggleDark();
  Dile_StoreAction.setNavbar({
    theme: themeEnum.dark,
  });
};
</script>
<style lang="scss" scoped>
.afterSale-container {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;

  .afterSale-head {
    flex: var(--el-menu-item-height) 0 0;
  }
  .afterSale-content {
    flex: 1;
    height: 0;
    width: 100%;
    padding: 1.625rem 0.9rem;
  }

  --afterSale-head-height: 1.8rem;
  --el-menu-item-height: var(--afterSale-head-height) !important;
}
</style>
<style lang="scss">
.dv-border-box-content {
  display: flex;
  justify-content: center;
  align-items: center;
}
.el-scrollbar {
  width: 100%;
}
</style>
